<script setup lang="tsx">
import { useEnumeratePicker } from '@/utils'
const { t } = useI18n()
const isExpanded = ref(true)
const togglePanel = () => {
  isExpanded.value = !isExpanded.value
}

// 使用具体类型定义 props
const props = defineProps({
  currentRow: {
    type: Object,
    default: () => null
  },
  operatorOptions: {
    type: Object,
    default: () => null
  }
})

// 定义 dataList 变量
const dataList = ref<any[]>([])
if (props.currentRow) {
  dataList.value = props.currentRow.delivery || []
}
const isImage = (url: string) => {
  if (!url) return false
  const imgExtensions = /\.(jpg|jpeg|png|gif|bmp|webp|svg|tiff)$/i // 图片扩展名正则（不区分大小写）
  // 提取 URL 中"?"之前的部分（排除参数），再匹配扩展名
  const urlWithoutParams = url.split('?')[0]
  return imgExtensions.test(urlWithoutParams)
}
</script>

<template>
  <el-card shadow="always">
    <div @click="togglePanel" class="header">
      <span>{{ t('order.receipt') }}</span>
      <el-icon v-if="isExpanded">
        <el-icon-arrow-down />
      </el-icon>
      <el-icon v-else>
        <el-icon-arrow-right />
      </el-icon>
    </div>
    <el-collapse-transition>
      <div v-show="isExpanded" class="w-full">
        <el-table
          v-if="currentRow?.delivery_method === 1"
          :data="dataList"
          highlight-current-row
          stripe
          border
          :cell-style="{ textAlign: 'center' }"
          :header-cell-style="{ textAlign: 'center' }"
        >
          <el-table-column
            :label="t('order.consignee')"
            prop="name"
            min-width="200"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            :label="t('order.phone')"
            prop="phone"
            min-width="130"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            :label="t('order.email')"
            prop="email"
            min-width="130"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            :label="t('order.zipCode')"
            prop="zip_code"
            min-width="60"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            :label="t('order.country')"
            prop="country_name"
            min-width="140"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            :label="t('order.provinceOrState')"
            prop="state"
            min-width="140"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            :label="t('order.city')"
            prop="city_name"
            min-width="140"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            :label="t('order.address')"
            prop="address"
            min-width="200"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            :label="t('order.alternateAddress')"
            prop="address2"
            min-width="200"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            :label="t('order.company')"
            prop="company"
            min-width="160"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            :label="t('order.delivery_remark')"
            prop="delivery_remark"
            min-width="160"
            :show-overflow-tooltip="true"
          />
          <!--          <el-table-column :label="t('order.aging')" min-width="80" :show-overflow-tooltip="true">-->
          <!--            <template #default="{ row }">-->
          <!--              {{ useEnumeratePicker(operatorOptions.prescription, row.prescription) }}-->
          <!--            </template>-->
          <!--          </el-table-column>-->
        </el-table>

        <!-- 自提 -->
        <template v-if="currentRow?.delivery_method === 0">
          <div class="flex flex-items-center my-20px text-14px font-bold pl-10px">{{
            t('dealerAssetManagement.selfPickupInformation')
          }}</div>
          <ElDescriptions border :column="2">
            <ElDescriptionsItem label="姓名">
              <template v-if="currentRow?.pickup.length">
                {{ currentRow.pickup[0].pickup_name }}
              </template>
            </ElDescriptionsItem>
            <ElDescriptionsItem label="电话">
              <template v-if="currentRow?.pickup.length">
                {{ currentRow.pickup[0].pickup_phone }}
              </template>
            </ElDescriptionsItem>
            <ElDescriptionsItem label="身份证">
              <template v-if="currentRow?.pickup.length">
                {{ currentRow.pickup[0].pickup_passport }}
              </template>
            </ElDescriptionsItem>
            <ElDescriptionsItem label="车辆信息">
              <template v-if="currentRow?.pickup.length">
                {{ currentRow.pickup[0].pickup_vehicle }}
              </template>
            </ElDescriptionsItem>
          </ElDescriptions>
          <div v-if="currentRow.pickup[0].annex_list.length" class="flex py-20px pl-10px">
            <div class="text-14px font-bold w-60px">附件:</div>
            <div class="flex flex-wrap gap-10px">
              <div
                v-for="item in currentRow.pickup[0].annex_list"
                :key="item.id"
                class="w-60px h-60px"
              >
                <template v-if="isImage(item.url)">
                  <el-image :src="item.url" :preview-src-list="[item.url]" class="w-full h-full" />
                </template>
                <template v-else>
                  <a :href="item.url" target="_blank">{{ item.name }}</a>
                </template>
              </div>
            </div>
          </div>
        </template>

        <!-- 仓内过货 -->
        <template v-if="currentRow?.delivery_method === 2">
          <div class="flex flex-items-center my-20px text-14px font-bold pl-10px">仓内过货信息</div>
          <ElDescriptions border :column="2">
            <ElDescriptionsItem label="姓名">
              <template v-if="currentRow?.pickup.length">
                {{ currentRow.pickup[0].pickup_name }}
              </template>
            </ElDescriptionsItem>
            <ElDescriptionsItem label="电话">
              <template v-if="currentRow?.pickup.length">
                {{ currentRow.pickup[0].pickup_phone }}
              </template>
            </ElDescriptionsItem>
            <ElDescriptionsItem label="护照">
              <template v-if="currentRow?.pickup.length">
                {{ currentRow.pickup[0].pickup_passport }}
              </template>
            </ElDescriptionsItem>
            <ElDescriptionsItem label="仓库code">
              <template v-if="currentRow?.pickup.length">
                {{ currentRow.pickup[0].warehouse_code }}
              </template>
            </ElDescriptionsItem>
          </ElDescriptions>
          <div v-if="currentRow.pickup[0].annex_list.length" class="flex py-20px pl-10px">
            <div class="text-14px font-bold w-60px pl-10px">附件:</div>
            <div class="flex flex-wrap gap-10px">
              <div
                v-for="item in currentRow.pickup[0].annex_list"
                :key="item.id"
                class="w-60px h-60px"
              >
                <template v-if="isImage(item.url)">
                  <el-image :src="item.url" :preview-src-list="[item.url]" class="w-full h-full" />
                </template>
                <template v-else>
                  <a :href="item.url" target="_blank">{{ item.name }}</a>
                </template>
              </div>
            </div>
          </div>
        </template>
      </div>
    </el-collapse-transition>
  </el-card>
</template>

<style scoped>
.header {
  display: flex;
  height: 40px;
  padding: 0 10px;
  margin-bottom: 10px;
  font-weight: 900;
  cursor: pointer;
  background-color: #f3f3f3;
  border-radius: 5px;
  align-items: center;
  justify-content: space-between;
}
</style>
